<!-- 文件预览 -->
<template>
  <div>
    <ul class="el-upload-list el-upload-list--picture-card">
      <li v-for="item in ImgVideolist" :key="item.fileUrl" class="el-upload-list__item is-success">
        <img v-if="isImageByUrl(item.fileUrl)" :src="item.fileUrl" alt="" class="el-upload-list__item-thumbnail">
        <video v-else-if="isVideoByUrl(item.fileUrl) ||isAduioByUrl(item.fileUrl)"
        class="mp3-player"
        :poster="isVideoByUrl(item.fileUrl) ? null : isAudioImg" style="width:100%;height: 100%;">
          <source :src="item.fileUrl"><source>
        </video>
        <img v-else-if="isExcelByUrl(item.fileUrl)" src="./images/excel.png" class="file-icon" alt="">
        <img v-else-if="isPdfByUrl(item.fileUrl)" src="./images/pdf.png" class="file-icon" alt="">
        <img v-else-if="isPptByUrl(item.fileUrl)" src="./images/ppt.png" class="file-icon" alt="">
        <img v-else-if="isWordByUrl(item.fileUrl)" src="./images/word.png" class="file-icon" alt="">
        <img v-else-if="isZipByUrl(item.fileUrl)" src="./images/zip.png" class="file-icon" alt="">
        <img v-else src="./images/other.png" class="file-icon" alt="">
        <!-- <i v-else class="file-icon el-icon-document"></i> -->
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(item)"
          >
            <i v-if="isImageByUrl(item.fileUrl)" class="el-icon-view"></i>
            <i v-else-if="isVideoByUrl(item.fileUrl) ||isAduioByUrl(item.fileUrl)" class="el-icon-video-play"></i>
            <i v-else class="el-icon-paperclip"></i>
          </span>
          <span v-if="mode === 'edit'"
            class="el-upload-list__item-delete"
            @click="handleRemove(item)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </li>
    </ul>
    <div class="other" v-if="Otherlist.length">
      <div v-for="(item,index) in Otherlist" :key="index" class="otherfile"  @click="handlePictureCardPreview(item)">
        <img v-if="isExcelByUrl(item.fileUrl)" src="./images/excel.png" class="file-icon" alt="">
        <img v-else-if="isPdfByUrl(item.fileUrl)" src="./images/pdf.png" class="file-icon" alt="">
        <img v-else-if="isPptByUrl(item.fileUrl)" src="./images/ppt.png" class="file-icon" alt="">
        <img v-else-if="isWordByUrl(item.fileUrl)" src="./images/word.png" class="file-icon" alt="">
        <img v-else-if="isZipByUrl(item.fileUrl)" src="./images/zip.png" class="file-icon" alt="">
        <img v-else src="./images/other.png" class="file-icon" alt="">
        <div class="other-right">
          <p>{{item.fileName}}</p>
          <div class="other-right-bot">
            <img class="file_down" src="./images/down.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <c-dialog :visible.sync="dialogVisible" append-to-body top="5vh" width="800px" destroy-on-close title="查看">
      <img v-if="isImageByUrl(elsrc)" :src="elsrc" width="100%" alt />
      <video v-if="isVideoByUrl(elsrc)" :src="elsrc" style="width:100%;height: 500px;" controls="controls" controlslist="nodownload" width="100%" height="50%"></video>
      <audio v-if="isAduioByUrl(elsrc)" :src="elsrc" controls="controls" controlslist="nodownload" style="width:100%"></audio>
    </c-dialog>
  </div>
</template>

<script>
import { isVideoByUrl, isImageByUrl, isAduioByUrl, isExcelByUrl, isPdfByUrl, isZipByUrl, isPptByUrl, isWordByUrl, download } from './utils.js'

export default {
  name: 'FileView',
  props: {
    fileList: {
      type: Array,
      default: () => []
    },
    mode: {
      type: String,
      default: 'view'
    }
  },
  components: {},
  data () {
    return {
      elsrc: '',
      isVideoByUrl,
      isImageByUrl,
      isAduioByUrl,
      isExcelByUrl,
      isPdfByUrl,
      isPptByUrl,
      isWordByUrl,
      isZipByUrl,
      dialogVisible: false
    }
  },

  computed: {
    isAudioImg () {
      return require('@/assets/img/mp3.png')
    },
    ImgVideolist () {
      const a = []
      const b = []
      this.fileList.forEach(el => {
        if (this.isImageByUrl(el.fileUrl)) {
          a.push(el)
        } else if (this.isVideoByUrl(el.fileUrl) || this.isAduioByUrl(el.fileUrl)) {
          b.push(el)
        }
      })
      return a.concat(b)
    },
    Otherlist () {
      const arr = []
      this.fileList.forEach(el => {
        if (this.isImageByUrl(el.fileUrl) || this.isVideoByUrl(el.fileUrl) || this.isAduioByUrl(el.fileUrl)) {
        } else {
          arr.push(el)
        }
      })
      return arr
    }
  },

  mounted () {},

  methods: {
    handlePictureCardPreview (file) {
      this.elsrc = file.fileUrl
      const canOpen = isVideoByUrl(this.elsrc) || isImageByUrl(this.elsrc) || isAduioByUrl(this.elsrc)

      if (canOpen) {
        this.dialogVisible = true
      } else {
        download(file.fileUrl, file.name)
      }
    },
    handleRemove (file) {
      this.$emit('remove', file, this.fileList)
    }
  }
}

</script>
<style lang="scss" scoped>
.el-upload-list {
  .el-upload-list__item {
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
  }
  .file-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: $--color-primary;
    font-size: 30px;
  }
}
.mp3-player {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
.other {
  display: flex;
  flex-wrap: wrap;
}
.otherfile {
  cursor: pointer;
  margin: 0 8px 8px 0;
  flex-shrink: 0;
  width: 168px;
  height: 56px;
  background: #f7f7f7;
  border-radius: 2px;
  padding: 10px 12px;
  display: flex;
  img {
    flex-shrink: 0;
  }
  .other-right {
    margin-left: 10px;
    flex: 1;
    p {
      width: 100px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #333333;
      line-height: 18px;
    }
    &-bot {
      position: relative;
    }
    .file_down {
      position: absolute;
      right: 0;
    }
  }
}
</style>
